<template>
  <div class="analysis1-container">
    <div class="left-container">
      <div class="left-item">
        <div class="label">可再生资源利用率</div>
        <div class="value">{{ leftData.rebirth }}%</div>
      </div>
      <div class="left-item">
        <div class="label">系统能源利用率</div>
        <div class="value">{{ leftData.systemPower }}%</div>
      </div>
      <div class="left-item">
        <div class="label">系统碳排放量</div>
        <div class="value">{{ leftData.emissionsc }}kg</div>
      </div>
      <div class="left-item">
        <div class="label">碳排放减少量</div>
        <div class="value">{{ leftData.reducec }}kg</div>
      </div>
    </div>
    <div class="right-container">
      <div class="query-container">
        <el-select
          v-model="queryType"
          placeholder="请选择"
          style="margin-right: 30px;"
          @change="queryModel = null"
        >
          <el-option v-for="item in queryTypes" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <el-date-picker
          v-if="queryType === '年'"
          v-model="queryModel"
          align="right"
          type="year"
          value-format="yyyy"
          :clearable="false"
          placeholder="选择年份"
        ></el-date-picker>
        <el-date-picker
          v-if="queryType === '月'"
          v-model="queryModel"
          align="right"
          type="month"
          value-format="yyyy-MM"
          :clearable="false"
          placeholder="选择月份"
        ></el-date-picker>
        <el-date-picker
          v-if="queryType === '日'"
          v-model="queryModel"
          align="right"
          type="date"
          value-format="yyyy-MM-dd"
          :clearable="false"
          placeholder="选择日期"
        ></el-date-picker>
        <el-button type="primary" style="margin-left: 30px;" @click="getTopData">查询</el-button>
      </div>
      <div class="top-container">
        <div class="left" ref="left"></div>
        <div class="right" ref="right"></div>
      </div>
      <div class="bottom-container">
        <div class="query">
          <div
            :class="'query-item ' + ' query-item-' + index"
            @click="queryClick(index)"
            v-for="(item, index) in bottomQuery"
            :key="index"
          >{{ item.label }}</div>
        </div>
        <div ref="bottom" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import moment from "moment";

export default {
  data() {
    return {
      queryTypes: ["年", "月", "日"],
      queryType: "年",
      queryModel: moment().format("YYYY"),
      topLeftChart: null,
      topRightChart: null,
      bottomChart: null,
      bottomQuery: [
        {
          label: "冷",
          value: "supplycool"
        },
        {
          label: "热",
          value: "supplyHeat"
        },
        {
          label: "电",
          value: "consumePower"
        }
      ],
      monthData: [],
      dayData: [],
      hourData: [],
      statusData: [
        {
          label: "月",
          value: 1
        },
        {
          label: "日",
          value: 2
        },
        {
          label: "小时",
          value: 3
        }
      ],
      bottomIndex: 0,
      statusIndex: 0,
      date: null,
      leftData: {
        emissionsc: 0,
        rebirth: 0,
        reducec: 0,
        systemPower: 0
      }
    };
  },
  async mounted() {
    await this.getLeftData();
    await this.getTopData();
    await this.getBottomData(moment().format("YYYY"));
    let self = this;
    window.onresize = function() {
      self.topLeftChart.resize();
      self.topRightChart.resize();
      self.bottomChart.resize();
    };
  },
  methods: {
    async getLeftData() {
      const result = await this.$fetchGet(
        `/power/systemIndicators/YEAR/${moment().format("YYYY")}`
      );
      console.log(result);
      this.leftData = result.result;
    },
    async queryClick(index) {
      this.bottomIndex = index;
      this.statusIndex = 0;
      this.date = null;
      await this.getBottomData(moment().format("YYYY"));
    },
    topOption(name, data, unit) {
      return {
        title: {
          text: name,
          left: "center",
          top: 20
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20
        },
        color: ["#2994DF", "#9252B0", "#C79D43", "#24B9D2"],
        series: [
          {
            name: name,
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                    "{icon|●}{name|" +
                    params.name +
                    "}{value|" +
                    params.value +
                    unit +
                    "}"
                  );
                },
                rich: {
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: "#666666"
                  },
                  value: {
                    fontSize: 18,
                    fontWeight: "bold",
                    color: "#333333"
                  }
                }
              }
            },
            data: data.map(item => {
              return {
                value: item.value,
                name: item.name
              };
            })
          }
        ]
      };
    },
    bottomOption(name, data) {
      let color;
      if (name.includes("冷")) {
        color = "#3398DB";
      } else if (name.includes("热")) {
        color = "#9152B0";
      } else {
        color = "#C49F3E";
      }
      return {
        title: {
          text: name,
          left: "left",
          top: 20
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        color: [color],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: data.map(item => item.label),
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: name,
            type: "bar",
            barWidth: "60%",
            data: data.map(item => item.value / 1000)
          }
        ]
      };
    },
    async getTopData() {
      if (!this.queryModel) {
        this.$message.warning('请先选择时间')
        return
      }
      let arr = this.queryModel.split('-')
      let title
      if (arr.length === 1) {
        title = arr[0] + '年'
      } else if (arr.length === 2){
        title = arr[0] + '年' + arr[1] + '月'
      } else {
        title = arr[0] + '年' + arr[1] + '月' + arr[2] + '日'
      }
      const result = await this.$fetchGet(
        `/power/takeOnEverything/${this.queryModel}`
      );
      if (this.topLeftChart) {
        this.topLeftChart.clear()
        this.topRightChart.clear()
      }
      this.topLeftChart = echarts.init(this.$refs["left"]);
      this.topLeftChart.setOption(
        this.topOption(
          `${title}成本分析`,
          [
            { value: result.result.norm.supplycoolPrice / 100000, name: "冷" },
            { value: result.result.norm.supplyHeatPrice / 100000, name: "热" },
            { value: result.result.norm.consumePowerPrice / 100000, name: "电" }
          ],
          "元"
        )
      );
      this.topRightChart = echarts.init(this.$refs["right"]);
      this.topRightChart.setOption(
        this.topOption(
          `${title}标煤分析`,
          [
            { value: result.result.cost.supplycool / 1000, name: "冷" },
            { value: result.result.cost.supplyHeat / 1000, name: "热" },
            { value: result.result.cost.consumePower / 1000, name: "电" }
          ],
          "kg"
        )
      );
    },
    async getBottomData(date) {
      if (date.split(" ").length === 2) {
        this.$message.warning("最小为小时力度");
        return;
      }
      const arr = date.split("-");
      let date1;
      let date2;
      if (arr.length === 1) {
        date1 = date;
        date2 = "MONTH";
      } else if (arr.length === 2) {
        this.statusIndex = this.statusIndex + 1;
        date1 = moment(date).format("YYYY-MM");
        date2 = "DAY";
      } else if (arr.length === 3) {
        this.statusIndex = this.statusIndex + 1;
        date1 = moment(date).format("YYYY-MM-DD");
        date2 = "HOUR";
      }
      const result = await this.$fetchGet(
        `/power/getPowerEntitys/${date2}/${date1}/${this.bottomQuery[
          this.bottomIndex
        ].value.toUpperCase()}`
      );
      console.log("-------", this.bottomChart);
      if (!this.bottomChart) {
        this.bottomChart = echarts.init(this.$refs["bottom"]);
        let title = `【${this.bottomQuery[this.bottomIndex].label}】${
          this.statusData[this.statusIndex].label
        }能耗分析`;
        this.bottomChart.setOption(
          // 【冷水】月能耗分析
          this.bottomOption(
            `${title}`,
            result.result.map(item => {
              return {
                label: item.createTimeU,
                value: item[this.bottomQuery[this.bottomIndex].value]
              };
            })
          )
        );
        this.bottomChart.on("click", params => {
          this.getBottomData(params.name);
        });
      } else {
        let title = `【${this.bottomQuery[this.bottomIndex].label}】${
          this.statusData[this.statusIndex].label
        }能耗分析`;
        this.bottomChart.setOption(
          // 【冷水】月能耗分析
          this.bottomOption(
            `${title}`,
            result.result.map(item => {
              return {
                label: item.createTimeU,
                value: item[this.bottomQuery[this.bottomIndex].value]
              };
            })
          ),
          true
        );
      }
    }
  }
};
</script>

<style lang="less">
.analysis1-container {
  width: calc(100vw - 20px);
  height: calc(100vh - 60px - 20px);
  display: flex;
  .left-container {
    width: 400px;
    display: flex;
    flex-direction: column;
    .left-item {
      flex: 1;
      display: flex;
      padding: 20px;
      margin-bottom: 20px;
      margin-left: 20px;
      line-height: calc((100vh - 60px - 300px) / 4);
      font-size: 20px;
      color: #fff;
      .label {
      }
      .value {
        flex: 1;
        text-align: right;
      }
      &:nth-child(1) {
        background: #2b93df;
        margin-top: 20px;
      }
      &:nth-child(2) {
        background: #9352b0;
      }
      &:nth-child(3) {
        background: #c79d43;
      }
      &:nth-child(4) {
        background: #25b8d4;
      }
    }
  }
  .right-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .query-container {
    margin-top: 20px;
    padding: 0 30px;
    text-align: right;
  }
  .top-container {
    flex: 1;
    display: flex;
    .left,
    .right {
      flex: 1;
      margin: 25px;
      border: 2px solid #efefef;
      box-sizing: border-box;
    }
  }
  .bottom-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 25px;
    box-sizing: border-box;
    border: 2px solid #efefef;
    .query {
      display: flex;
      margin: 10px 0 0 10px;
      &-item {
        padding: 10px 30px;
        margin-right: 20px;
        cursor: pointer;
        color: #ffffff;
        &-0 {
          background: #3191e1;
        }
        &-1 {
          background: #9152b0;
        }
        &-2 {
          background: #c49f3e;
        }
      }
    }
    .chart {
      flex: 1;
    }
  }
}
</style>